<template>
  <Card>
    <span slot="title">申报活动管理</span>
    <div slot="content">
      <div class="reviewActive_management">
        <div class="reviewActive_management_header">
          <el-form
            :inline="true"
            :model="searchForm"
            ref="searchForm"
            size="small"
            :rules="searchFormRules"
          >
            <el-form-item prop="title">
              <el-input
                v-model="searchForm.title"
                placeholder="活动名称"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <we-button type="primary" @click="handleSearch" size="small"
                ><i class="el-icon-search"></i> 查询</we-button
              >
              <we-button plain @click="handleReset" size="small">
                <i class="el-icon-refresh"></i> 重置</we-button
              >
            </el-form-item>
          </el-form>
          <div class="button_item">
            <we-button
              @click="addDialogFormVisible = true"
              type="primary"
              size="small"
              ><i style="font-weight: 700" class="el-icon-plus"></i>
              添加</we-button
            >

            <we-button @click="handleDelete" type="danger" size="small">
              <i class="el-icon-delete-solid"></i> 删除</we-button
            >
          </div>
        </div>
        <!-- 添加模态框 -->
        <el-dialog
          width="30%"
          class="addDialog"
          title="添加活动"
          :visible.sync="addDialogFormVisible"
        >
          <el-form :model="addForm" :rules="addFormRules" ref="addForm">
            <el-form-item prop="title" label="单位名称" label-width="80px">
              <el-input
                v-model="addForm.title"
                placeholder="请填写活动标题"
              ></el-input>
            </el-form-item>
            <el-form-item prop="remark" label="备注" label-width="80px">
              <el-input type="textarea" v-model="addForm.remark"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <we-button size="small" @click="addDialogFormVisible = false"
              >取 消</we-button
            >
            <we-button size="small" type="primary" @click="submitAdd"
              >确 定</we-button
            >
          </div>
        </el-dialog>
        <!-- 表格 -->
        <div class="reviewActive_management_table">
          <el-table
            size="mini"
            :data="tableData"
            :header-cell-style="headerStyle"
            @selection-change="handleSelectionChange"
            stripe
            select-on-indeterminate
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="#" type="index" width="55">
            </el-table-column>
            <el-table-column label="名称">
              <template slot-scope="scope">
                <span>{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="申报状态" width="90px" align="center">
              <template slot-scope="scope">
                <span
                  :style="
                    scope.row.shenbao === 1 ? 'color:green' : 'color:orange'
                  "
                  >{{ scope.row.shenbao === 1 ? "正常" : "禁用" }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="审核状态" width="90px" align="center">
              <template slot-scope="scope">
                <span
                  :style="
                    scope.row.shenhe === 1 ? 'color:green' : 'color:orange'
                  "
                  >{{ scope.row.shenhe === 1 ? "正常" : "禁用" }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="评审状态" width="90px" align="center">
              <template slot-scope="scope">
                <span
                  :style="
                    scope.row.status === 1 ? 'color:green' : 'color:orange'
                  "
                  >{{ scope.row.status === 1 ? "正常" : "禁用" }}</span
                >
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="450px">
              <template slot-scope="scope">
                <we-button
                  type="primary"
                  size="mini"
                  @click="handleEdit(scope.row)"
                  ><i class="el-icon-edit"></i> 编辑</we-button
                >
                <we-button size="mini" type="primary"> 配置活动</we-button>
                <we-button
                  @click="changeShenbao(scope.row)"
                  size="mini"
                  :type="scope.row.shenbao === 1 ? 'warning' : 'success'"
                  ><i
                    :class="
                      scope.row.shenbao === 1
                        ? 'el-icon-remove'
                        : 'el-icon-video-play'
                    "
                  ></i>
                  {{
                    scope.row.shenbao === 1 ? "关闭申报" : "开启申报"
                  }}</we-button
                >
                <we-button
                  @click="changeShenhe(scope.row)"
                  size="mini"
                  :type="scope.row.shenhe === 1 ? 'warning' : 'success'"
                  ><i
                    :class="
                      scope.row.shenhe === 1
                        ? 'el-icon-remove'
                        : 'el-icon-video-play'
                    "
                  ></i>
                  {{
                    scope.row.shenhe === 1 ? "关闭审核" : "开启审核"
                  }}</we-button
                >
                <we-button
                  @click="changePingshen(scope.row)"
                  size="mini"
                  :type="scope.row.status === 1 ? 'warning' : 'success'"
                  ><i
                    :class="
                      scope.row.status === 1
                        ? 'el-icon-remove'
                        : 'el-icon-video-play'
                    "
                  ></i>
                  {{
                    scope.row.status === 1 ? "关闭评审" : "开启评审"
                  }}</we-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 编辑模态框 -->
          <el-dialog
            width="30%"
            class="editDialog"
            title="修改信息"
            :visible.sync="editDialogFormVisible"
          >
            <el-form :model="editForm" :rules="editFormRules" ref="editForm">
              <el-form-item prop="title" label="单位名称" label-width="80px">
                <el-input
                  v-model="editForm.title"
                  placeholder="请填写活动标题"
                ></el-input>
              </el-form-item>
              <el-form-item prop="remark" label="备注" label-width="80px">
                <el-input type="textarea" v-model="editForm.remark"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <we-button size="small" @click="editDialogFormVisible = false"
                >取 消</we-button
              >
              <we-button size="small" type="primary" @click="submitEdit"
                >确 定</we-button
              >
            </div>
          </el-dialog>
          <!-- 分页 -->
          <div class="pagination">
            <we-Pagination
              :page="pagination.pageNum"
              :pageSize="pagination.pageSize"
              :total="pagination.total"
              @currentChange="currentChange($event)"
            >
              ></we-Pagination
            >
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card";
import WeButton from "@/components/WeButton";
import WePagination from "@/components/WePagination";
import {
  getReviewActivityList,
  changeShenbaoStatus,
  changeShenheStatus,
  changePingshenStatus,
  editShow,
  addEditActive,
  delActive,
} from "@/api/titleDeclaration";
import moment from "moment";
export default {
  components: {
    Card,
    WeButton,
    WePagination,
  },
  data() {
    return {
      // 查询表单
      searchForm: {
        title: "",
      },
      // 查询规则
      searchFormRules: {
        title: [{ max: 50, message: "必须小于 50 个字符", trigger: "blur" }],
      },
      // 添加表单
      addForm: {
        title: "",
        remark: "",
      },
      // 添加规则
      addFormRules: {
        title: [
          { required: true, message: "请输入修改活动名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        remark: [
          {
            max: 100,
            message: "请输入少于 100 个字符",
            trigger: "blur",
          },
        ],
      },
      addDialogFormVisible: false,
      // 修改表单
      editForm: {
        title: "",
        remark: "",
        uuid: "",
      },
      // 修改规则
      editFormRules: {
        title: [
          { required: true, message: "请输入修改活动名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        remark: [
          {
            max: 100,
            message: "请输入少于 100 个字符",
            trigger: "blur",
          },
        ],
      },
      editDialogFormVisible: false,
      tableData: [],
      // 勾选项
      multipleSelection: [],
      // 分页数据
      pagination: {
        total: 1, // 总数据条数
        pageSize: 8, // 每页条数
        pageNum: 1, // 当前页
      },
      statusList: {
        shenbao: "",
        shenhe: "",
        status: "",
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    // 表头样式回调
    headerStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
    // 查询
    handleSearch() {
      this.$refs.searchForm.validate((valid) => {
        if (valid) {
          this.pagination.pageNum = 1;
          this.fetchData();
        } else {
          return false;
        }
      });
    },
    // 添加活动
    submitAdd() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          // 模态框状态取反
          this.addDialogFormVisible = !this.addDialogFormVisible;
          let { code, msg } = await addEditActive(this.addForm);
          if (code === 200) {
            this.fetchData();
            this.$message({
              type: "success",
              message: msg,
            });
            // 添加表单
            this.addForm = {
              title: "",
              remark: "",
            };
          }
        } else {
          return false;
        }
      });
    },
    // 批量删除
    handleDelete() {
      // let CanBeDeleted = this.multipleSelection.filter((item) => {
      //   return item.shenhe === 0 && item.shenbao === 0 && item.status === -1;
      // });
      //  let { code, msg } = await delActive({
      //           uuids: CanBeDeleted.map((item) => {
      //             return item.uuid;
      //           }).toString(),
      //         });

      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let { code, msg } = await delActive({
            uuids: this.multipleSelection
              .filter((item) => {
                return (
                  item.shenhe === 0 && item.shenbao === 0 && item.status === -1
                );
              })
              .map((item) => {
                return item.uuid;
              })
              .toString(),
          });
          if (code === 200) {
            this.$message({
              type: "success",
              message: msg,
            });
            this.fetchData();
          } else {
            this.$message({
              type: "danger",
              message: msg,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "删除失败,请选择全部为禁用状态的内容",
          });
        });
    },
    // 重置
    handleReset() {
      this.searchForm = {
        title: "",
      };
      this.handleSearch();
    },
    // 申报状态切换
    changeShenbao(row) {
      if (row.shenbao === 0) {
        changeShenbaoStatus({ uuid: row.uuid, shenbao: 1 });
        this.fetchData();
      } else {
        changeShenbaoStatus({ uuid: row.uuid, shenbao: 0 });
        this.fetchData();
      }
      this.fetchData();
    },
    // 审核状态切换
    changeShenhe(row) {
      if (row.shenhe === 0) {
        changeShenheStatus({ uuid: row.uuid, shenhe: 1 });
        this.fetchData();
      } else {
        changeShenheStatus({ uuid: row.uuid, shenhe: 0 });
        this.fetchData();
      }
      this.fetchData();
    },
    // 评审状态切换
    async changePingshen(row) {
      if (row.status === 1) {
        changePingshenStatus({ uuid: row.uuid, status: -1 });
        this.fetchData();
      } else {
        let { code, msg } = await changePingshenStatus({
          uuid: row.uuid,
          status: 1,
        });
        if (code === 500) {
          this.$message({
            type: "error",
            message: msg,
          });
          return;
        }
        this.fetchData();
      }
      this.fetchData();
    },
    // 修改触发
    async handleEdit(data) {
      let res = await editShow({ uuid: data.uuid });
      let { title, remark } = res.data;
      this.editForm = { title, remark, uuid: data.uuid };
      this.editDialogFormVisible = true;
    },
    // 提交修改
    async submitEdit() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          // 模态框状态取反
          this.editDialogFormVisible = !this.editDialogFormVisible;
          let { code, msg } = await addEditActive(this.editForm);
          if (code === 200) {
            this.fetchData();
            this.$message({
              type: "success",
              message: msg,
            });
          }
        } else {
          return false;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 获取数据
    async fetchData() {
      // 发送请求 获取账号列表
      let res = await getReviewActivityList({
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        // 查询参数
        title: this.searchForm.title,
      });
      // 解构数据
      let { code, data } = res;

      // // 处理时间格式
      // data.resList.forEach((item) => {
      //   item.createTime = moment(item.createTime).format("YYYY-MM-DD");
      // });

      // 边界判断
      if (!data.resList.length && this.pagination.pageNum !== 1) {
        this.pagination.pageNum -= 1;
        this.fetchData();
      }
      // 赋值渲染
      if (code === 200) {
        this.pagination.total = data.totals;
        this.tableData = data.resList;
      }
    },
    // 当前页改变
    currentChange(event) {
      this.pagination.pageNum = event;
      this.fetchData();
    },
  },
};
</script>

<style lang="less" scoped>
.reviewActive_management {
  .reviewActive_management_header {
    display: flex;
    justify-content: space-between;
  }
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
